<template>
  <!-- 增改角色弹框 -->
  <hcDialog
    dialogWidth="600px"
    :dialogTitle="
      options.type === 'add'
        ? $t('system.dictionary.newParamColumns')
        : $t('system.dictionary.editParamColumns')
    "
    customClass="dict-type-dialog"
    :isVisable="options.show"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="saveDialog(formRef)"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="180"
      class="add-role-ruleForm"
      status-icon
    >
      <el-form-item
        :label="$t('system.dictionary.parameColumnName')"
        prop="dictName"
      >
        <el-input
          v-model="form.dictName"
          :placeholder="$t('system.dictionary.parameNameInfo')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('system.dictionary.parameColumnCode')"
        prop="dictType"
      >
        <el-input
          v-model="form.dictType"
          :placeholder="$t('system.dictionary.parameCodeInfo')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('system.dictionary.parameColumnRemark')"
        prop="remark"
      >
        <el-input
          type="textarea"
          v-model="form.remark"
          :placeholder="$t('system.dictionary.parameRemarkInfo')"
        />
      </el-form-item>
    </el-form>
  </hcDialog>
</template>

<script setup name="DictTypeDialog">
import { reactive, ref, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
const emit = defineEmits(["onSure", "onCancel"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        curRole: null, // 当前编辑的角色
      };
    },
  },
});

const rules = {
  dictName: [
    {
      required: true,
      message: $t("system.dictionary.parameNameInfo"),
      trigger: "blur",
    },
  ],
  dictType: [
    {
      required: true,
      message: $t("system.dictionary.parameCodeInfo"),
      trigger: "blur",
    },
  ],
};

const formRef = ref();

const data = reactive({
  form: {
    dictName: "", // 参数列别名称
    dictType: "", // 参数列别编码
    remark: "", // 备注
  },
});

watch(
  () => props.options,
  (val) => {
    if (val.type === "edit") {
      const curRole = JSON.parse(JSON.stringify(val.curRole));
      for (let key in data.form) {
        data.form[key] = curRole[key];
      }
    }
  },
  { deep: true, immediate: true }
);

// 添加、修改
const saveDialog = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      emit("onSure", {
        form: JSON.parse(JSON.stringify(data.form)),
        type: props.options.type,
        id: props.options.curRole?.id, // 用于编辑的id
      });
      closeFun();
    }
  });
};

// 关闭弹框
const closeFun = () => {
  formRef.value.resetFields();
  data.form = {
    dictName: "", // 参数列别名称
    dictType: "", // 参数列别编码
    remark: "", // 备注
  };
  emit("onCancel");
};
const { form } = toRefs(data);
</script>

<style lang="scss"></style>
